<template>
  <div class="header-wrap">
    <div class="left">
      <div class="back" @click="back">
        <SvgIcon icon-class="ic_返回" />
        <span>返回</span>
      </div>
    </div>
    <div class="title">素材名称：{{ resourceDetail && resourceDetail.fileResName }}</div>
    <div class="count">访问次数：{{ resourceDetail && resourceDetail.usageCount }}</div>
  </div>
</template>

<script setup lang="ts">
import { IResource } from '@/api/resource/types';

defineOptions({
  name: '',
});

interface IProps {
  resourceDetail: null | IResource;
}

const props = withDefaults(defineProps<IProps>(), {
  resourceDetail: null,
});

const router = useRouter();
function back() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: #1d1e1f;
  color: #fff;
  font-size: 14px;

  .left {
    display: flex;
    align-items: center;
    width: 30%;
    margin-right: auto;
    .back {
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-right: 16px;
      cursor: pointer;
      .svg-icon {
        margin-left: 12px;
        margin-right: 4px;
        font-size: 20px;
      }
    }
  }
  .title {
    margin-right: 16px;
  }
}
</style>
